<template>
	<div class="tmpl">

		{{ list }}
		<hr>
		{{postResBody}}
		<hr>
		{{jsonpBody}}
		
	</div>
</template>
<script>
	export default{  //相当于new Vue(); 所以在main.js中Vue.use(vueResource); 就可以在这里直接this.$http
		data(){
			return{
				list:'',
				postResBody:'',
				jsonpBody:''
			}
		},
		created(){
			//表示，vue组件创建完毕以后，并且已经将data中和methods中的所有属性方法初始化完毕

			//这里调用ajax请求******************************************************
			this.getDemo();
			this.postDemo();
			this.jsonpDemo();
		},
		methods:{
			//定义ajax请求get的方法
			getDemo(){
				var url = 'http://api.jirengu.com/weather.php';
				//接下来就要借住vue-resource来ajax请求这个url
				//this其实就是代表当前组件的Vue对象，所以可以this.$http可以点出来
				
				//es5的写法
				// this.$http.get(url).then(function(res){
				// 	//代表成功函数
				// },
				// function(res) {
				// 	//代表失败函数
				// });

				//es6的写法
				this.$http.get(url).then(res=>{
					//成功获取服务器响应
					this.list = res.body;
				},
				res=>{
					//异常
					console.log("请求异常，检查服务器是否打开");
				});

			},
			//定义ajax请求post的方法
			postDemo(){
				var url = 'http://api.jirengu.com/weather.php';
				this.$http.post(url,{name:'hello'},{emulateJSON:true}).then(res=>{
					this.postResBody = res.body;
				},
				res=>{
					console.log('出错了');
				});
			},
			//定义ajax请求的jsonp方法，跨域请求
			jsonpDemo(){
				var url = 'http://api.jirengu.com/weather.php';
				this.$http.jsonp(url).then(res=>{
					this.jsonpBody = res.body;
				},
				res=>{
					console.log("出错了");
				});
			}

		}
	}
</script>
<style>
	
</style>